<template>
  <div class="app-container">
    <div class="custom_card_0">
      <MenuTabs :list="tabs_list1" name="车辆状态" :column="10" :labelStyle="{ width: '100px' }" :active="carStatusIndex"
                @tabs_click="changeCarStatus" calss="menuTabs"></MenuTabs>
      <MenuTabs :list="tabs_list2" name="维保预警" :labelStyle="{ width: '100px' }" :column="10" :active="activeIndex"
                @tabs_click="secondedTypeChange"></MenuTabs>
    </div>
    <div class="custom_card_0" v-show="showSearch">
      <el-form inline :model="queryParams" size="mini" ref="queryForm" label-width="90px" label-position="right">
        <div style="margin-bottom: 10px;border-bottom: 1px #DDDDDD solid">
          <el-row :gutter="10" class="mb10">
            <el-col :span="1.5">
              <el-button class="first-plain-btn" size="medium" @click="goToPage(1)" v-hasPermi="['car:basic:add']">新&nbsp;&nbsp;增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="sec-plain-btn" size="medium" @click="goToPage(2)" v-hasPermi="['car:vehicle:index']">车辆监控</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="thr-plain-btn" size="medium" @click="goToPage(3)" v-hasPermi="['car:basic:ilegal']">违章查询</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="four-plain-btn" size="medium" @click="goToPage(4)" v-hasPermi="['bills:statistics:overview']">出租概况</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="carSelection(21)" v-hasPermi="['car:basic:insertingCoil']">下&nbsp;&nbsp;线</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="carSelection(22)" v-hasPermi="['car:basic:insurance']">商业险续保</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="carSelection(23)" v-hasPermi="['car:basic:insurance']">交强险续保</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="carSelection(24)" v-hasPermi="['car:basic:repair']">维修保养</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="carSelection(25)" v-hasPermi="['car:basic:inspection']">年&nbsp;&nbsp;检</el-button>
            </el-col>
          </el-row>
        </div>
        <div style="display: flex">
          <div :class="{'min-box':!showAll}">
            <el-form-item label1 label="车牌筛选" prop="carNo">
              <el-input v-model="queryParams.carNo" placeholder="车牌号筛选" clearable maxlength="8" @keyup.enter.native="handleQuery"/>
            </el-form-item>

            <el-form-item label1 label="品牌筛选" prop="carBrandId">
              <el-select v-model="queryParams.carBrandId" placeholder="品牌筛选" clearable @change="getSeriesList" filterable remote>
                <el-option v-for="(item, i) in brandList" :key="i" :label="item.brandName" :value="item.brandId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label1 label="车系筛选" prop="carSeriesId">
              <el-select v-model="queryParams.carSeriesId" placeholder="车系筛选" clearable filterable remote>
                <el-option v-for="(item, i) in seriesList" :key="i" :label="item.seriesName" :value="item.seriesId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label1 label="车型筛选" prop="carModelName">
              <el-input v-model="queryParams.carModelName" placeholder="车型筛选" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>

            <el-form-item label1 label="门店筛选" prop="locatedStoreId">
              <el-select v-model="queryParams.locatedStoreId" placeholder="停靠门店筛选" clearable filterable remote>
                <el-option v-for="(item, i) in storeList" :key="i" :label="item.storeName" :value="item.storeId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label1 label="来源筛选" prop="source">
              <el-select v-model="queryParams.source" placeholder="车辆来源筛选" clearable remote>
                <el-option label="自购车辆" :value="1"></el-option>
                <el-option label="经租车辆" :value="2"></el-option>
                <el-option label="托管车辆" :value="6"></el-option>
                <el-option label="调入车辆" :value="3"></el-option>
                <el-option label="借入车辆" :value="4"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label1 label="供应商 " prop="supplierName">
              <el-input v-model="queryParams.supplierName" placeholder="请输入供应商" clearable maxlength="8" @keyup.enter.native="handleQuery"/>
            </el-form-item>
          </div>
          <div style="align-self: flex-end">
            <el-form-item style="width: 220px !important;">
              <el-button type="primary" size="medium" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="medium" @click="resetQuery">重置</el-button>
              <el-button type="text" size="mini" @click="showAll=!showAll;resetQueruyForm()">{{ showAll ? '收起' : '展开' }}<i
                :class="showAll?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="custom_card">
      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button class="first-plain-btn" icon="el-icon-download" size="medium" :loading="exportLoading"
                     @click="handleExport">导出
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button class="sec-plain-btn" icon="el-icon-upload2" size="medium" @click="handleImport"
                     v-hasPermi="['car:basic:import']">导入
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="basicList" border>
        <el-table-column label="操作" header-align="center" align="center" class-name="small-padding fixed-width"
                         min-width="200" fixed="left">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleDetail(scope.row)" v-hasPermi="['car:basic:query']">查看
            </el-button>
            <el-button type="text" size="mini" :disabled="!btnFlag(scope.row, 1)" @click="handleUpdate(scope.row)">修改
            </el-button>
            <el-button type="text" size="mini" :disabled="!btnFlag(scope.row, 2)" @click="handleDelete(scope.row)">删除
            </el-button>
            <el-dropdown v-if="showgengduo(scope.row)" @command="(command) => handleCommand(command, scope.row)">
              <span class="el-dropdown-link"><i class="el-icon-d-arrow-right el-icon--right"></i>更多</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="handleServicing" v-if="btnFlag(scope.row, 3)">完成整备</el-dropdown-item>
                <el-dropdown-item command="handleCancelServicing" v-if="btnFlag(scope.row, 4)">车辆整备</el-dropdown-item>
                <el-dropdown-item command="management" v-if="btnFlag(scope.row, 5)">车辆处置</el-dropdown-item>
                <el-dropdown-item command="allocation" v-if="btnFlag(scope.row, 6)">车辆调拨</el-dropdown-item>
                <!--                <el-dropdown-item command="allocationBack" v-if="btnFlag(scope.row, 7)">车辆调回</el-dropdown-item>-->
                <el-dropdown-item command="cancelAllocation" v-if="btnFlag(scope.row, 7)">取消调拨</el-dropdown-item>
                <el-dropdown-item command="inspection" v-if="btnFlag(scope.row, 8)">车辆年检</el-dropdown-item>
                <el-dropdown-item command="vehicle" v-if="btnFlag(scope.row, 9)">维修保养</el-dropdown-item>
                <el-dropdown-item command="overVehicle" v-if="btnFlag(scope.row, 10)">维保完成</el-dropdown-item>
                <el-dropdown-item command="sYrenewinsurance" v-if="btnFlag(scope.row, 11)">商业险续保</el-dropdown-item>
                <el-dropdown-item command="jqrenewinsurance" v-if="btnFlag(scope.row, 12)">交强险续保</el-dropdown-item>
                <el-dropdown-item command="cargps" v-if="btnFlag(scope.row, 13)">车辆监控</el-dropdown-item>
                <el-dropdown-item command="cancelOffline" v-if="btnFlag(scope.row, 14)">取消下线</el-dropdown-item>
                <el-dropdown-item command="carOffLine" v-if="btnFlag(scope.row, 15)">车辆下线</el-dropdown-item>
                <el-dropdown-item command="mileageAdjustment" v-if="btnFlag(scope.row, 18)">里程调整</el-dropdown-item>
                <!--                <el-dropdown-item command="cancelOffline" v-if="btnFlag(scope.row, 16)">取消下线</el-dropdown-item>-->
                <!--                <el-dropdown-item command="delayedLaunch" v-if="btnFlag(scope.row, 17)">延期上线</el-dropdown-item>-->
                <el-dropdown-item command="handleLog">日志</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column label="品牌/车系/车型" min-width="220" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.carBrandName + ' / ' + scope.row.carSeriesName }}（{{
              scope.row.carModelName
            }}）
            <!-- <div style="white-space: nowrap">{{ scope.row.carModelName }}</div> -->
          </template>
        </el-table-column>
        <el-table-column label="车牌号" align="center" prop="carNo" min-width="100" :show-overflow-tooltip="true"/>
        <el-table-column label="归属门店" align="center" prop="belongingStoreName" min-width="120"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="停靠门店" align="center" prop="locatedStoreName" min-width="120"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="车辆来源" align="center" prop="source" min-width="120" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row.transferStatus == 2">车辆调入</div>
            <div v-else-if="scope.row.transferStatus == 3">车辆调拨</div>
            <div v-else-if="scope.row.carStatus == 6">同行借入</div>
            <div v-else-if="scope.row.source">
              <dict-tag :options="dict.type.vehicle_source" :value="scope.row.source"/>
            </div>
            <div v-else>--</div>
            <div v-if="scope.row.supplierName"><span style="color: #ff4949">供</span>:{{ scope.row.supplierName }}</div>
            <div style="color:#ff4949;"
                 v-if="scope.row.depositRemainingDays >= 0 && scope.row.depositRemainingDays != null && scope.row.depositRemainingDays <= 30">
              托管剩余{{ scope.row.depositRemainingDays }}天
            </div>
            <div style="color:#ff4949;" v-if="scope.row.depositStatus == 1">托管中</div>
          </template>
        </el-table-column>
        <el-table-column label="车辆状态" align="center" prop="carStatus" min-width="220px">
          <template slot-scope="scope">
            <div>{{ carStatusFmt(scope.row) }}</div>
            <div v-if="scope.row.secondmentId" style="color: #ff4949">
              （ 预计{{ scope.row.secondmentBookingTime }}调至{{ scope.row.secondmentStoreName }}）
            </div>
            <!--            <div v-if="scope.row.lineStatus == 0 && scope.row.onlineBookingTime" style="color: #ff4949">-->
            <!--              （ 预计{{ scope.row.onlineBookingTime }}上线）-->
            <!--            </div>-->
            <!--            <div v-else-if="scope.row.offlineBookingTime" style="color: #ff4949">-->
            <!--              （ 预计{{ scope.row.offlineBookingTime }}-->
            <!--              <template v-if="scope.row.onlineBookingTime">-->
            <!--                ~{{ scope.row.onlineBookingTime }}-->
            <!--              </template>-->
            <!--              下线）-->
            <!--            </div>-->
          </template>
        </el-table-column>
        <el-table-column prop="syDay" label="商业险信息" align="center" min-width="120px" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span v-if="row.syType == 1" style="color: #00c585">
              在保
              <span style="white-space: nowrap">
                剩余&nbsp;{{ row.syDay }}&nbsp;天
              </span>
            </span>
            <span v-else-if="row.syType == 2" style="color: #ff4949">
              不在保
              <span style="white-space: nowrap">
                超&nbsp;{{ 0 - Number(row.syDay) }}&nbsp;天
              </span>
            </span>
            <span v-else-if="row.syType == 3" style="color: #ffb83b">
              即将到期
              <span style="white-space: nowrap">
                剩余&nbsp;{{ row.syDay }}&nbsp;天
              </span>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="jqDay" label="交强险信息" align="center" min-width="120px" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span v-if="row.jqType == 1" style="color: #00c585">
              在保
              <span>剩余&nbsp;{{ row.jqDay }}&nbsp;天</span>
            </span>
            <span v-else-if="row.jqType == 2" style="color: #ff4949">
              不在保
              <span>超&nbsp;{{ 0 - Number(row.jqDay) }}&nbsp;天</span>
            </span>
            <span v-else-if="row.jqType == 3" style="color: #ffb83b">
              即将到期
              <span>剩余&nbsp;{{ row.jqDay }}&nbsp;天</span>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="njDay" label="年检信息" align="center" min-width="120px" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span v-if="row.njType == 1" style="color: #00c585">
              已年检
              <span>剩余&nbsp;{{ row.njDay }}&nbsp;天</span>
            </span>
            <span v-else-if="row.njType == 2" style="color: #ff4949">
              已到期
              <span>超&nbsp;{{ 0 - Number(row.njDay) }}&nbsp;天</span>
            </span>
            <span v-else-if="row.njType == 3" style="color: #ffb83b">
              即将到期
              <span>剩余&nbsp;{{ row.njDay }}&nbsp;天</span>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="useMileage" label="保养信息" align="center" min-width="180" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span v-if="Number(row.nextMile) > Number(row.useMileage)" style="color: #00c585">
              已保养
              <span>
                距离下次保养{{
                  Number(row.nextMile) - Number(row.useMileage)
                }}km
              </span>
            </span>
            <span v-else-if="Number(row.nextMile) < Number(row.useMileage)" style="color: #ff4949">
              待保养
              <span>车辆里程已到保养标准</span>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>

        <el-table-column label="所属公司" align="center" prop="orgSupplierName" min-width="120"
                         :show-overflow-tooltip="true"/>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>


    <!-- 添加或修改车辆维修与保养对话框 -->
    <el-dialog title="车辆延期上线" :visible="openLaunch" width="600px" append-to-body @close="cancel">
      <el-form ref="delayedLaunchForm" :model="delayedLaunchForm" :rules="delayedLaunchRules" label-width="130px">
        <el-row>
          <el-form-item prop="startTime" required>
            <template slot="label">
              预计上线时间
              <el-tooltip placement="right-start">
                <div slot="content" style="font-size: 14px">
                  若配置预计上线时间，系统将自动<br/>
                  上线车辆:若车辆未完成维保,系统<br/>
                  自动上线车辆时将自动完成维保
                </div>
                <el-button type="text"><i class="el-icon-warning-outline"></i></el-button>
              </el-tooltip>
            </template>
            <el-date-picker type="date" v-model="delayedLaunchForm.startTime" format="yyyy-MM-dd" :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd" :style="{width: '80%'}" placeholder="请选择预计上线时间" clearable>
            </el-date-picker>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="delayedLaunch()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 添加或修改年检管理对话框 -->
    <el-dialog title="车辆年检" :visible.sync="inspectionOpen" min-width="1100px" destroy-on-close append-to-body @close="editNowId = null">
      <InspectionEditor ref="InspectionEditor" v-if="inspectionOpen" :carId="editNowId"></InspectionEditor>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doInspection">确 定</el-button>
        <el-button @click="inspectionOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改年检管理对话框 -->
    <el-dialog title="选择车辆" :visible.sync="showCarSelection" min-width="1100px" destroy-on-close append-to-body>
      <MmvCarSelection ref="MmvCarSelection" v-if="showCarSelection" @handleCommand="handleCommand" :type="canType"></MmvCarSelection>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showCarSelection = false">取 消</el-button>
      </div>
    </el-dialog>

    <div style="position: fixed; top: 100%">
      <MmvWx ref="MmvWx" :carId="editNowId" :carPlateNo="editNowCarNo" :useMileage="editNowUseMileage" :openWx="openWx" v-if="openWx" @close="openWx = false;getList()"></MmvWx>
      <MmvBy ref="MmvBy" :carId="editNowId" :carPlateNo="editNowCarNo" :useMileage="editNowUseMileage" :openBy="openBy" v-if="openBy" @close="openBy = false;getList() "></MmvBy>
      <MmvSy ref="MmvSy" :carId="editNowId" :carPlateNo="editNowCarNo" title="商业险续保" :opensy="opensy" v-if="opensy" @close="opensy = false;getList()"></MmvSy>
      <MmvJq ref="MmvJq" :carId="editNowId" :carPlateNo="editNowCarNo" title="交强险续保" :openJq="openJq" v-if="openJq" @close="openJq = false;getList()"></MmvJq>
      <managementAdd ref="managementAdd" :carId="editNowId" :carPlateNo="editNowCarNo" :open="openCz" v-if="openCz" @close="openCz = false;getList()"></managementAdd>
      <MmvAllocation ref="MmvAllocation" :carId="editNowId" :carNo="editNowCarNo" :openTb="openTb" v-if="openTb" @close="openTb = false;getList()"></MmvAllocation>
      <MmvAllocationBack ref="MmvAllocationBack" :carId="editNowId" :carNo="editNowCarNo" :openTh="openTh" v-if="openTh" @close="openTh = false;getList()"></MmvAllocationBack>
    </div>
    <!-- 导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" min-width="400px" append-to-body class="upload-dialog">
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-drawer title="日志" :visible.sync="showdingdanlog" direction="rtl" size="30%">
      <MmvLog ref="MmvLog" v-if="showdingdanlog" :orderNo="carId" :type="26"></MmvLog>
    </el-drawer>

    <car-off-line ref="carOffLine" @success="getList"></car-off-line>
    <CarMileageAdjustment ref="carMileageAdjustment" @success="getList"></CarMileageAdjustment>
  </div>
</template>

<script>
import {
  listBasic,
  delBasic,
  exportBasic,
  carServicing,
  importTemplate,
  statistics,
  cancelCarServicing,
  getCarBrandList,
  addOnoff,
  cancelByCar,
  delayedLaunch,
  cancelAllocation
} from '@/api/car/car_basic'
import {
  // getCarBrandList,
  getCarSeriesList,
  getStoreList
} from '@/api/car/model'
import {getToken} from '@/utils/auth'
import {addInspection, updateInspection} from '@/api/maintenance/inspection'
import Carsave from '@/views/car/basic/car_save'
import Caredit from '@/views/car/basic/car_edit'
import InspectionEditor from '@/views/maintenance/inspection/editor.vue'
import MmvDetail from './detail.vue'
import MmvWx from '@/views/car/basic/repairMaintain/index.vue'
import MmvBy from '@/views/car/basic/repairMaintain/feedback.vue'
import MmvSy from '@/views/car/basic/syrenewal.vue'
import MmvJq from '@/views/car/basic/jqrenewal.vue'
import MmvCarSelection from '@/views/car/basic/carSelection.vue'
import managementAdd from '@/views/car/management/add'
import MmvAllocation from '@/views/car/basic/allocation/allocation.vue'
import MmvAllocationBack from '@/views/car/basic/allocation/allocationBack.vue'
import {checkPermi} from '@/utils/permission'

import Tabs from '@/components/custom/tabs.vue'
import MenuTabs from '@/components/custom/newMenuTabs.vue'
import MmvLog from '@/views/order/orderBasic/log.vue'
import Template from "@/views/system/template";
import carOffLine from "@/views/components/carOffLine.vue";
import moment from "moment/moment";
import CarMileageAdjustment from "@/views/components/carMileageAdjustment.vue";

export default {
  name: 'Car_basic',
  components: {
    CarMileageAdjustment,
    carOffLine,
    Template,
    Carsave,
    Caredit,
    MmvDetail,
    InspectionEditor,
    MmvBy,
    MmvWx,
    MmvSy,
    MmvJq,
    managementAdd,
    MmvAllocation,
    MmvAllocationBack,
    Tabs,
    MenuTabs,
    MmvLog,
    MmvCarSelection
  },
  dicts: ['car_status', 'car_repair_status', 'vehicle_source'],
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < (Date.now() - 1000 * 60 * 60 * 24)//选当前时间之后的时间
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() < Date.now()//选当前时间之后的时间
        }
      },
      tabs_list1: [
        {
          key: 0,
          name: '全部'
        },
        {
          key: '1',
          name: '待整备'
        },
        {
          key: '2',
          name: '备发车'
        },
        {
          key: '3',
          name: '预定中'
        },
        {
          key: '4',
          name: '用车中'
        },
        {
          key: '15',
          name: '车辆调出'
        },
        {
          key: '16',
          name: '同行借出'
        },
        {
          key: '17',
          name: '已下线'
        }
      ],
      tabs_list2: [
        {
          key: '0',
          name: '全部'
        },
        {
          key: '8',
          name: '天商业险到期'
        },
        {
          key: '9',
          name: '天交强险到期'
        },
        {
          key: '10',
          name: '天待年检'
        },
        {
          key: '11',
          name: '保养到期'
        },
        {
          key: '12',
          name: '维修保养中'
        }
      ],
      yewushaixuan: null,
      editNowId: null,
      editNowCarNo: null,
      editNowUseMileage: 0,
      showdingdanlog: false, // 显示订单日志
      showCarSelection: false,
      canType: 0,
      //年检
      inspectionOpen: false,
      //处置
      openCz: false,
      //调拨
      openTb: false,
      //调回
      openTh: false,
      //维修
      openWx: false,
      //保养
      openBy: false,
      //商业险续保
      opensy: false,
      //交强险续保
      openJq: false,

      detailId: null,
      tabsDefaultSelect: '',
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      showAll: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 车辆列表表格数据
      basicList: [],
      // 车辆列表表格数据
      storeList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false, // 用户导入参数
      openCarOff: false,
      openLaunch: false,
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/car/basic/import'
        // url: process.env.VUE_APP_BASE_API + "/maintenance/repair/import"
      },

      brandList: [],
      seriesList: [],
      carId: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carBrandId: null,
        carSeriesId: null,
        carModelId: null,
        carNo: null,
        belongingStoreId: null,
        locatedStoreId: null,
        repairStatus: null,
        carStatus: null,
        carModelName: null,
        source: null,
        supplierName: null,
        type: null
      },
      activeIndex: 0,
      carStatusIndex: 0,
      carStatus: null,
      statisticsNum: {
        qb: 0, //全部
        zg: 0, //自购
        jz: 0, //经租
        zd: 0, //在店
        dc: 0, //调出
        dr: 0, //调入
        jc: 0, //借出
        jr: 0, //借入
        sy: 0, //商业险预警
        jq: 0, //交强险预警
        nj: 0, //年检预警
        by: 0, //保养到期
        wb: 0, //维保中
        syYjDay: 0, //商业险预警阈值
        jqYjDay: 0, //交强险预警阈值
        njYjDay: 0 //年检预警阈值
      },
      showDetail: false,
      offlineForm: {
        carId: null,
        type: 1,
        createTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
        updateTime: null,
        reasonForOffline: 1,
        remark: ""
      },
      delayedLaunchForm: {
        id: null,
        startTime: null
      },
      // 表单校验
      rules: {
        createTime: [
          {
            required: true,
            message: '请选择下线时间',
            trigger: 'change',
          },
        ],
        reasonForOffline: [
          {
            required: true,
            message: '请选择下线原因',
            trigger: 'change',
          },
        ]
      },
      delayedLaunchRules: {
        startTime: [
          {
            required: true,
            message: '请选择上线时间',
            trigger: 'change',
          },
        ]
      },
    }
  },
  computed: {},
  created() {
    this.initPage();
  },
  activated() {
    this.getList();
  },

  methods: {

    initPage() {
      let key = this.$route.query.key
      let type = this.$route.query.type
      if (type) {
        this.secondedTypeChange(type);

      }
      if (key) {
        this.changeCarStatus(key);
        switch (Number(key)) {
          case 1: //全部
            this.resetQuery()
            break
          case 2: //自购车辆
            this.queryParams.source = 1
            this.handleQuery()
            break
          case 3: //经租车辆
            this.queryParams.source = 2
            this.handleQuery()
            break
          case 4: //在店
            this.resetQuery()
            break
          case 5: //调出
            this.changeCarStatus(15)
            break
          case 6: //调入
            this.queryParams.source = 3
            this.handleQuery()
            break
          case 7: //借出
            this.changeCarStatus(16)
            break
          case 8: //借入
            this.queryParams.source = 4
            this.handleQuery()
            break
          default:
            this.getList()
        }
      } else {
        this.getList()
      }

      getStoreList().then((response) => {
        this.storeList = response.data
      })
      getCarBrandList().then((response) => {
        this.brandList = response.data
      })
      this.statistics()
    },

    /** 订单日志 */
    handleLog(row) {
      this.carId = row.id
      this.showdingdanlog = true
    },
    checkPermi,
    btnFlag(row, btnIndex) {
      //carStatus 车辆状态 1待整备，2备发车，3 预定中  4.用车中 5.车辆借出 6.车辆借入
      //transferStatus 调拨状态 0未调拨，1调出 2调入 3调拨中
      //repairStatus   维保状态 0未维保，1保养中 2维修中
      //lineStatus   上下线状态 0下线，1上线
      switch (btnIndex) {
        case 1: //修改
          return checkPermi(['car:basic:edit']) && row.lineStatus === 0 && row.transferStatus != 1
        case 2: //删除
          return checkPermi(['car:basic:remove']) && row.lineStatus === 0 && row.transferStatus != 1
        case 3: //完成整备
          return checkPermi(['car:basic:servicing']) && row.carStatus === 1 && row.repairStatus == 0 && row.transferStatus != 1 && row.lineStatus == 1
        case 4: //车辆整备
          return checkPermi(['car:basic:servicing']) && row.carStatus === 2 && row.repairStatus == 0 && row.transferStatus != 1 && row.lineStatus == 1
        case 5: //车辆处置
          return checkPermi(['car:basic:management']) && row.transferStatus != 1 && row.repairStatus == 0 && row.lineStatus == 0
        case 6: //车辆调拨
          return checkPermi(['car:basic:allocation']) && row.carStatus < 3 && row.transferStatus != 1 && !row.secondmentId
        case 7: //车辆调回//取消调拨
          return checkPermi(['car:basic:allocation']) && row.secondmentId
        case 8: //车辆年检
          return checkPermi(['car:basic:inspection']) && row.carStatus < 6 && row.njType != 1 && row.transferStatus != 1
        case 9: //维修保养
          return checkPermi(['car:basic:repair']) && row.repairStatus == 0 && row.transferStatus != 1
        case 10: //维保完成
          return checkPermi(['car:basic:repair']) && row.repairStatus > 0 && row.carStatus < 5 && row.transferStatus != 1
        case 11: //商业险续保
          return checkPermi(['car:basic:insurance']) && row.syType != 1 && row.carStatus < 5 && row.transferStatus != 1
        case 12: //交强险续保
          return checkPermi(['car:basic:insurance']) && row.jqType != 1 && row.carStatus < 5 && row.transferStatus != 1
        case 13://车辆监控
          return checkPermi(['car:basic:gpsmonitor']) && row.deviceNo && row.transferStatus != 1
        case 14: //取消下线
          return checkPermi(['car:basic:beOnline']) && row.lineStatus == 0 && row.transferStatus != 1
        case 15:  //车辆下线
          return checkPermi(['car:basic:insertingCoil']) && row.carStatus < 5 && row.transferStatus != 1 && ((row.lineStatus == 0 && row.onlineBookingTime) || row.lineStatus == 1)
        // case 16:  //取消下线
        //   return checkPermi(['car:basic:insertingCoil']) && row.lineStatus == 1 && row.offlineBookingTime
        // case 17:  //延期上线
        //   return checkPermi(['car:basic:beOnline']) && row.onlineBookingTime
        case 18://里程调整
          return checkPermi(['car:basic:mileageAdjustment'])
      }
    },
    showgengduo(row) {
      for (let i = 3; i < 18; i++) {
        if (this.btnFlag(row, i)) return true
      }
      return false
    },
    carStatusFmt(row) {
      if (row.lineStatus == 0) {
        return '已下线'
      }
      // if (row.transferStatus == 1) {
      //   return '车辆调出'
      // }
      // if (row.transferStatus == 3) {
      //   return '车辆调拨中'
      // }
      if (row.carStatus == 1) {
        return '待整备'
      }
      if (row.carStatus == 2) {
        return '备发车'
      }
      if (row.carStatus == 3) {
        return '预定中'
      }
      if (row.carStatus == 4 || row.carStatus == 6) {
        return '用车中'
      }
      if (row.carStatus == 5) {
        return '同行借出'
      }
    },
    changeCarStatus(index) {
      this.carStatusIndex = index
      this.queryParams.carStatus = index
      this.handleQuery()
    },
    secondedTypeChange(index) {
      this.activeIndex = index
      this.queryParams.type = index
      this.handleQuery()
    },
    // 更多操作触发
    handleCommand(command, row) {
      this.showCarSelection = false
      this.editNowId = row.id
      this.editNowCarNo = row.carNo
      this.editNowUseMileage = row.useMileage
      switch (command) {
        case 'inspection':
          this.inspectionOpen = true
          break
        case 'sYrenewinsurance':
          this.opensy = true
          break
        case 'jqrenewinsurance':
          this.openJq = true
          break
        case 'handleLog':
          this.handleLog(row)
          break
        case 'overVehicle':
          this.openBy = true
          break
        case 'vehicle':
          this.openWx = true
          break
        case 'management':
          this.openCz = true
          break
        case 'handleServicing':
          this.handleServicing(row)
          break
        case 'handleCancelServicing':
          this.handleCancelServicing(row)
          break
        case 'allocation':
          this.openTb = true
          break
        // case 'allocationBack':
        //   this.openTh = true
        //   break
        case 'cancelAllocation':
          this.cancelAllocation(row)
          break
        case 'cancelOffline':
          this.cancelOffline(row)
          break
        case 'carOffLine':
          const carOffInfo = {
            carId: row.id,
            carNo: row.carNo,
            defaultCarOffTime: moment().format('YYYY-MM-DD HH:mm')
          }
          this.$refs.carOffLine.show(carOffInfo);
          break
        case 'delayedLaunch':
          this.delayedLaunchForm = {
            carId: row.id,
            startTime: row.onlineBookingTime
          }
          this.openLaunch = true;
          break
        case 'cargps':
          this.$router.push({
            name: 'Vehiclemonitoringpage',
            query: {
              id: row.id,
            }
          })
          break
        case 'mileageAdjustment':
          const carInfo = {
            carId: row.id,
            carNo: row.carNo,
            useMileage:row.useMileage,
            maintenanceCycle:row.maintenanceCycle,
            nextMile:row.nextMile
          }
          this.$refs.carMileageAdjustment.show(carInfo);
          break
        default:
          break
      }
    },
    formatBx(day) {
      if (day) {
        return
      }
    },
    statistics() {
      statistics(this.queryParams).then((response) => {
        let statisticsNum = response.data
        this.tabs_list2 = [
          {
            key: '0',
            name: '全部'
          },
          {
            key: '8',
            name: '近' + statisticsNum.syYjDay + '天商业险到期'
          },
          {
            key: '9',
            name: '近' + statisticsNum.jqYjDay + '天交强险到期'
          },
          {
            key: '10',
            name: '近' + statisticsNum.njYjDay + '天待年检'
          },
          {
            key: '11',
            name: '保养到期'
          },
          {
            key: '12',
            name: '维修保养中'
          }
        ]
      })
    },
    tabsClick(tab, event) {
      var params = {}

      if (tab.index == 0) {
        //默认查询全部
      } else {
        params = {
          carStatus: tab.index
        }
      }
      this.queryParams.carStatus = params.carStatus
      this.getList()
    },
    // 获取车系
    getSeriesList(carBrandId) {
      this.queryParams.carSeriesId = null
      getCarSeriesList(carBrandId).then((response) => {
        this.seriesList = response.data
      })
    },
    /** 查询车辆列表列表 */
    getList() {
      this.loading = true
      listBasic(this.queryParams).then((response) => {
        this.basicList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.openCarOff = false
      this.openLaunch = false
      this.reset()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetQueruyForm()
      this.handleQuery()
    },
    resetQueruyForm() {
      this.carStatus = null
      this.queryParams.type = 0
      this.daterangeDrivingLicenseValidityDate = []
      this.resetForm('queryForm')
    },
    carSelection(canType) {
      this.canType = canType
      this.showCarSelection = true
    },
    goToPage(type) {
      switch (type) {
        case 1://新增
          this.$router.push({name: 'basic_add'});
          break;
        case 2://车辆监控
          this.$router.push({name: 'Vehiclemonitoringpage'});
          break;
        case 3://车辆违章
          this.$router.push({path: '/riskManagement/illegalManager/illegal'});
          break;
        case 4://出租概况
          this.$router.push({path: '/record/generalSituation/dailyOverview'});
          break;
      }
    },
    /** 编辑按钮操作 */
    handleUpdate(row) {
      this.$router.push({name: `basic_edit`, query: {id: row.id}})
    },
    /** 查看详情 */
    handleDetail(row) {
      this.$router.push({name: `basic_detail`, query: {id: row.id}})
    },
    /* 车辆整备 */
    handleServicing(row) {
      this.$modal
        .confirm('车辆【' + row.carNo + '】是否完成整备？')
        .then(function () {
          var data = {
            id: row.id
          }
          return carServicing(data)
        })
        .then(() => {
          this.getList()

          // this.statistics()
          this.$modal.msgSuccess('操作成功')
        })
    },
    /* 取消车辆整备 */
    handleCancelServicing(row) {
      this.$modal
        .confirm('车辆【' + row.carNo + '】是否取消整备？')
        .then(function () {
          var data = {
            id: row.id
          }
          return cancelCarServicing(data)
        })
        .then(() => {
          this.getList()

          // this.statistics()
          this.$modal.msgSuccess('操作成功')
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal
        .confirm('是否确认导出数据项？')
        .then(() => {
          this.exportLoading = true
          return exportBasic(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {
        })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '车辆导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then((response) => {
        this.$download.name(response.msg)
      })
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', {
        dangerouslyUseHTMLString: true
      })
      this.getList()

      // this.statistics()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除该车辆【' + row.carNo + '】？')
        .then(function () {
          return delBasic(row.id)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    /** 车辆下线 */
    carOffLine() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.offlineForm.updateTime && new Date(this.offlineForm.updateTime).getTime() <= new Date(this.offlineForm.createTime)) {
            this.$modal.msgError('预计上线时间不能早于或等于下线时间')
          } else {
            addOnoff(this.offlineForm).then(() => {
              this.openCarOff = false
              this.getList()
              this.$modal.msgSuccess('操作成功')
            })
          }

        }
      })
    },


    /** 取消下线 */
    cancelOffline(row) {
      this.$modal
        .confirm('是否确认取消车辆【' + row.carNo + '】下线？')
        .then(function () {
          return cancelByCar({carId: row.id})
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('取消成功')
        })
        .catch(() => {
        })
    },

    /** 取消调拨 */
    cancelAllocation(row) {
      this.$modal.confirm('是否确认取消车辆【' + row.carNo + '】调出？').then(function () {
        return cancelAllocation({carId: row.id, id: row.secondmentId})
      })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('取消成功')
        })
        .catch(() => {
        })
    },

    /** 取消下线 */
    delayedLaunch() {
      let _that = this
      _that.$refs['delayedLaunchForm'].validate((valid) => {
        if (valid) {
          _that.$modal
            .confirm('是否确认延迟车辆上线？')
            .then(function () {
              return delayedLaunch(_that.delayedLaunchForm)
            })
            .then(() => {
              _that.openLaunch = false;
              _that.getList()
              _that.$modal.msgSuccess('操作成功')
            })
            .catch(() => {
            })
        }
      })
    },
    /** 车辆年检 */
    doInspection() {
      this.$refs?.InspectionEditor?.emitData((form) => {
        if (!form) {
          return
        }
        addInspection(form).then((response) => {
          this.$modal.msgSuccess('年检新增成功')
          this.inspectionOpen = false
          this.getList()
        })
      })
    }
  }
}
</script>
<style scoped>


.menuTabs {
  margin-bottom: 12px;
}

.upload-dialog .el-dialog .el-dialog__body div {
  text-align: center !important;
}

.min-box {
  overflow: hidden;
  height: 40px
}
</style>
